/* postcss-px-to-viewport-1 */
.p_home {
  color: #000;
  width: 100%;

  .banner {
    position: relative;
    text-align: center;
    height: 870px;
    width: 100%;
    background: url(@/assets/web/home-banner.png) no-repeat center center;
    background-size: cover;
    .texts {
      position: absolute;
      top: 195px;
      width: 100%;

      left: 0;
      color: #fff;
      box-sizing: border-box;
      .t1 {
        font-family: DM Sans;
        font-weight: 600;
        font-size: 32px;
        line-height: 120%;
        letter-spacing: 0%;
        text-align: center;
        text-transform: capitalize;
        text-align: center;
        // 字体渐变
        background: linear-gradient(180deg, #ffffff 0%, #938d8b 111.97%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
      }
      .t2 {
        margin-top: 48px;
        font-family: DM Sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 120%;
        letter-spacing: 0%;
        text-align: center;
        color: rgba(220, 220, 220, 1);
      }
      .t3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 114px;
        span {
          font-family: DM Sans;
          font-weight: 300;
          font-size: 20px;
          line-height: 120%;
          letter-spacing: 0%;
          text-align: center;
          margin-bottom: 15px;
        }
        img {
          height: 28px;
        }
      }
    }
  }
  .box2 {
    width: 100%;
    background: #000000;
    box-sizing: border-box;
    padding: 45px 15px 129px 15px;

    .t1 {
      font-family: DM Sans;
      font-weight: 700;
      font-size: 20.2px;
      line-height: 52.85px;
      letter-spacing: -1.1px;
      vertical-align: middle;
      color: #e9e9e9;
      margin-bottom: 8.76px;
    }
    .t2 {
      font-family: Inter;
      font-weight: 500;
      font-size: 16.43px;
      line-height: 19.93px;
      letter-spacing: -0.88px;
      vertical-align: middle;
      color: #8c8c8c;
    }
    .desc {
      position: absolute;
      top: 250.21px;
      left: 43.81px;
    }
    .box1 {
      width: 372.41px;
      height: 416.22px;
      border-radius: 16.43px;
      background-image: url(@/assets/svg/phone/page4_1.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-bottom: 45.78px;
      position: relative;
    }
    .box2 {
      width: 372.41px;
      height: 416.22px;
      border-radius: 16.43px;
      background-image: url(@/assets/svg/phone/page4_2.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      margin-bottom: 45.78px;
    }
    .box3 {
      width: 372.41px;
      height: 416.22px;
      border-radius: 16.43px;
      background-image: url(@/assets/svg/phone/page4_3.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      margin-bottom: 45.78px;
      .t1 {
        margin-bottom: 0px;
      }
    }
    .box4 {
      width: 372px;
      height: 552px;
      border-radius: 16.43px;
      position: relative;
      box-sizing: border-box;
      border: 1px solid #1e1e1e;
      background-image: url(@/assets/svg/phone/page4_4.svg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .desc {
        position: absolute;
        top: auto;
        bottom: 25px;
        left: 43.81px;
        .tt1 {
          font-family: DM Sans;
          font-weight: 700;
          font-size: 20.71px;
          line-height: 25.19px;
          letter-spacing: -1.1px;
          vertical-align: middle;
          color: #e9e9e9;
          margin-bottom: 18.42px;
        }
        .tt2 {
          font-family: Inter;
          font-weight: 500;
          font-size: 16.43px;
          line-height: 19.93px;
          letter-spacing: -0.88px;
          vertical-align: middle;
          color: #8c8c8c;
        }
      }
    }
  }
}
